<template>
  <div class="date" v-show="selectedDate.show">
        <div class="date_container">
            <div class="operate">
                  <p class="cancel">
                      <span @click="cancel();">取消</span>
                  </p>
                  <p class="confirm">
                      <span @click="confirm();">确定</span>
                  </p>
            </div>
            <div class="date-wrap">
                  <div class="year">
                      <ul>
                          <li v-for="year in selectedDate.year" :class="{'active':year==selectedYear}" @click="active(year,'year')">{{year}}</li>
                      </ul>
                  </div>
                  <div class="month">
                      <ul>
                          <li v-for="month in date.month" :class="{'active':month==selectedMonth}" @click="active(month,'month')">{{month}}</li>
                      </ul>
                  </div>
                  <div class="day">
                      <ul>
                          <li v-for="day in date.day" :class="{'active':day==selectedDay}" @click="active(day,'day')">{{day}}</li>
                      </ul>
                  </div>
            </div>
        </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      date:{
        /*year:[1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017],*/
        month:['01','02','03','04','05','06','07','08','09','10','11','12'],
        day:['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31']
      }
    }
  },
  props:['selectedDate'],
  computed:{
    selectedYear: {
      get: function () {
        return this.selectedDate.temporary? this.selectedDate.temporary.split('-')[0] : '';
      },
      set: function (newValue) {
        this.selectedDate.temporary=newValue+'-'+this.selectedMonth+'-'+this.selectedDay;
      }
    },
    selectedMonth: {
      get: function () {
        return this.selectedDate.temporary? this.selectedDate.temporary.split('-')[1] : '';
      },
      set: function (newValue) {
        this.selectedDate.temporary=this.selectedYear+'-'+newValue+'-'+this.selectedDay;
      }
    },
    selectedDay: {
      get: function () {
        return this.selectedDate.temporary? this.selectedDate.temporary.split('-')[2] : '';
      },
      set: function (newValue) {
        this.selectedDate.temporary=this.selectedYear+'-'+this.selectedMonth+'-'+newValue;
      }
    }
  },
  methods:{
    active(num,type){
       if(type=="year"){
         this.selectedYear=num; 
       }else if(type=="month"){
         this.selectedMonth=num; 
       }else if(type=="day"){
         this.selectedDay=num; 
       }
    },
    cancel(){
      this.selectedDate.temporary=this.selectedDate.actual;
      this.selectedDate.show=false;
    },
    confirm(){
      if(this.selectedYear&&this.selectedMonth&&this.selectedDay){
         this.selectedDate.actual=this.selectedDate.temporary;
         this.selectedDate.show=false;
      }else{
         alert('请选择完整的年月日');
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.date
{
  width:100%;
  height:100%;
  position:fixed;
  left:0;
  bottom:0;
  background:rgba(0,0,0,0.5);
  z-index: 100;
  .date_container
  {
    width:100%;
    position:absolute;
    left:0;
    bottom:0;
    background:#fff;
    z-index: 100;
    .operate
    {
      display:flex;
      border-bottom:1px solid #eee;
      p
      {
        flex:1;
        line-height:0.7rem;
        &.confirm
        {
          text-align:right;
          color:#078def;
        }
        &.cancel
        {
          color:#666;
        }
        span
        {
          padding:0 0.3rem;
          display:inline-block;
          font-size:0.3rem;
        }
      }
    }
    .date-wrap
    {
      display:flex;
      div{
        flex:1;
        height:4.9rem;
        overflow:hidden;
        &.month
        {
          border-left:1px solid #eee;
          border-right:1px solid #eee;
        }
        ul
        {
          height:4.9rem;
          overflow-y:auto;
          li
          {
            line-height:0.7rem;
            text-align:center;
            &.active
            {
              background:#078def;
              color:#fff;
            }
          }
        }
      }
    }
  }
}
</style>
